<template>
	<view class="container">
		<!-- 顶部状态切换栏 -->
		<view class="status-tabs">
			<view 
				v-for="(tab, index) in statusTabs" 
				:key="index"
				class="tab-item"
				:class="{ active: currentTab === index }"
				@tap="switchTab(index)">
				<text>{{tab.name}}</text>
			</view>
		</view>
		
		<!-- 订单列表 -->
		<scroll-view 
			class="order-list" 
			scroll-y 
			@scrolltolower="loadMoreOrders"
			:refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh">
			<view class="order-item" v-for="(order,index) in orderList" :key="index" @tap="goToOrderDetail(order)">
				<!-- 订单头部 -->
				<view class="order-header">
					<view class="order-type">
						<image src="https://jf2411-dd.oss-cn-hangzhou.aliyuncs.com/order-type.png" mode="aspectFit"></image>
						<text>{{order.modelName}}</text>
					</view>
					<text class="order-status">
					    <text v-if="order.orderStatus === 0" class="order-status pending">未接单</text>
					    <text v-else-if="order.orderStatus === 1 || order.orderStatus === 2" class="order-status ongoing">进行中</text>
					    <text v-else-if="order.orderStatus === 3 || order.orderStatus === 4" class="order-status completed">已完成</text>
					    <text v-else>未知状态</text>
					  </text>
				</view>
				
				<!-- 订单内容 -->
				<view class="order-content">
					<view class="location-info">
						<view class="start-point">
							<view class="point-icon start"></view>
							<view class="point-info">
								
								<text class="address">{{order.startAddress}}</text>
								<text class="time">{{order.createTime}}</text>
							</view>
						</view>
						<view class="end-point">
							<view class="point-icon end"></view>
							<view class="point-info">
								<text class="address">{{order.endAddress}}</text>
								<text class="time">{{order.completeTime}}</text>
							</view>
						</view>
					</view>
					
					<!-- 乘客信息 -->
					<view class="passenger-info">
						<image :src="order.passengerAvatar" mode="aspectFill" class="avatar"></image>
						<view class="info">
							<text class="name">{{order.username}}</text>
							<text class="phone">{{order.userphone}}</text>
						</view>
						<view class="action-btn" @tap.stop="contactPassenger(order)">
							<image src="https://jf2411-dd.oss-cn-hangzhou.aliyuncs.com/phone.png" mode="aspectFit"></image>
							<text>联系乘客</text>
						</view>
					</view>
				</view>
				
				<!-- 订单底部 -->
				<view class="order-footer">
					<view class="order-info">
						<text class="order-no">订单号：{{order.orderId}}</text>
						<text class="order-time">{{order.createTime}}</text>
					</view>
					<view class="order-amount">
						<text class="amount">¥{{order.price}}</text>
						<!-- <text class="distance">{{order.distance}}km</text> -->
					</view>
				</view>
				
				<!-- 订单操作按钮 -->
				<view class="order-actions" v-if="order.orderStatus === 'pending'">
					<button class="action-btn reject" @tap.stop="rejectOrder(order)">拒绝</button>
					<button class="action-btn accept" @tap.stop="acceptOrder(order)">接单</button>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading" v-if="isLoading">加载中...</view>
			<view class="no-more" v-if="!hasMore">没有更多订单了</view>
		</scroll-view>

	</view>
</template>

<script>
	import {getAllOrder,getPendingOrder,getProgressOrder,getFinishOrder} from '@/request/order.js'
	export default {
		data() {
			return {
				statusTabs: [
					{ name: '全部'},
					{ name: '待接单'},
					{ name: '进行中'},
					{ name: '已完成'}
				],
				currentTab: 0,
				orderList: [],
				page: 1,
				pageSize: 10,
				isLoading: false,
				isRefreshing: false,
				hasMore: true,
				driverId:null
			}
		},
		onLoad() {
		  const userInfo = uni.getStorageSync('userInfo');
		  this.driverId = userInfo.driverId;
		  this.getAllOrderList(); // 等待数据加载
		  console.log('订单列表:', this.orderList); // 确保在异步操作完成后打印
		},
		methods: {
			// 切换状态标签
			switchTab(index) {
				console.log(index);
				if (this.currentTab === index) return
				this.currentTab = index
				this.page = 1
				this.orderList = []
				this.hasMore = true
				// this.loadOrders();
				this.getOrderList();
			},
			getAllOrderList(){
				getAllOrder(this.driverId).then(res =>{
					this.orderList = res.data
					console.log(this.orderList,23223254535546);
				}).catch(err=>{
					console.log(err);
				})
			},
			//连接后端，获得订单
			getOrderList(){
				//全部
				if(this.currentTab == 0){
					getAllOrder(this.driverId).then(res =>{
						this.orderList = res.data
						console.log(this.orderList);
					}).catch(err=>{
						console.log(err);
					})
					return;
				}
				//待接单
				if(this.currentTab == 1){
					getPendingOrder(this.driverId).then(res =>{
						this.orderList = res.data
						console.log(this.orderList);
					}).catch(err=>{
						console.log(err);
					})
					return;
				}
				//进行中
				if(this.currentTab == 2){
					getProgressOrder(this.driverId).then(res =>{
						this.orderList = res.data
						console.log(this.orderList);
					}).catch(err=>{
						console.log(err);
					})
					return;
				}
				//完成的
				if(this.currentTab == 3){
					getFinishOrder(this.driverId).then(res =>{
						this.orderList = res.data
						console.log(res);
					}).catch(err=>{
						console.log(err);
					})
					return;
				}
			},
			
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				this.page = 1
				this.orderList = []
				this.hasMore = true
				// this.loadOrders()
			},
			
			// 加载更多
			loadMoreOrders() {
				// this.loadOrders()
			},
			
			// 跳转到订单详情
			goToOrderDetail(order) {
				const startLat = order.startLat / 1_000_000.0;
				const startLng = order.startLng / 1_000_000.0;
				const endLat = order.endLat / 1_000_000.0;
				const endLng = order.endLng / 1_000_000.0;
				console.log(order);
				if(order.orderStatus === 1){
					uni.navigateTo({
						url: '/pages/goUser/goUser'
					})
					return;
				}
				if(order.orderStatus === 2){
					uni.navigateTo({
						url: `/pages/goEnd/goEnd?startLat=${startLat}&startLng=${startLng}&endLat=${endLat}&endLng=${endLng}`
					})
				}
				
			},
			
			// 联系乘客
			contactPassenger(order) {
				uni.navigateTo({
					url: '/pages/contactPassenger/contactPassenger?orderNo=' + order.orderNo
				})
			},
			
			// 接单
			acceptOrder(order) {
				uni.showModal({
					title: '提示',
					content: '确定接受该订单吗？',
					success: (res) => {
						if (res.confirm) {
							// TODO: 调用接单API
							uni.showToast({
								title: '接单成功',
								icon: 'success'
							})
							// 刷新订单列表
							this.onRefresh()
						}
					}
				})
			},
			
			// 拒绝订单
			rejectOrder(order) {
				uni.showModal({
					title: '提示',
					content: '确定拒绝该订单吗？',
					success: (res) => {
						if (res.confirm) {
							// TODO: 调用拒绝订单API
							uni.showToast({
								title: '已拒绝订单',
								icon: 'success'
							})
							// 刷新订单列表
							this.onRefresh()
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
}

.status-tabs {
	display: flex;
	background-color: #fff;
	padding: 20rpx 0;
	position: sticky;
	top: 0;
	z-index: 100;
	
	.tab-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		
		text {
			font-size: 28rpx;
			color: #666;
		}
		
		&.active {
			text {
				color: #1B6EF3;
				font-weight: bold;
			}
			
			&::after {
				content: '';
				position: absolute;
				bottom: -20rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 40rpx;
				height: 4rpx;
				background-color: #1B6EF3;
				border-radius: 2rpx;
			}
		}
		
		.badge {
			position: absolute;
			top: -10rpx;
			right: 50rpx;
			background-color: #ff4d4f;
			color: #fff;
			font-size: 20rpx;
			padding: 2rpx 10rpx;
			border-radius: 20rpx;
			min-width: 32rpx;
			text-align: center;
		}
	}
}

.order-list {
	height: calc(100vh - 88rpx);
	padding: 20rpx;
	box-sizing: border-box;
}

.order-item {
	background-color: #fff;
	border-radius: 12rpx;
	margin-bottom: 20rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
	
	.order-type {
		display: flex;
		align-items: center;
		
		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.order-status {
	  font-size: 26rpx;
	}
	 
	.order-status.pending {
	  color: #ff9500;
	}
	 
	.order-status.ongoing {
	  color: #1B6EF3;
	}
	 
	.order-status.completed {
	  color: #52c41a;
	}
	 
	.order-status.status-unknown {
	  color: #999;
	}

}

.order-content {
	.location-info {
		background-color: #f8f8f8;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		
		.start-point, .end-point {
			display: flex;
			align-items: flex-start;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
		
		.point-icon {
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			margin: 10rpx 20rpx 0 0;
			
			&.start {
				background-color: #1B6EF3;
			}
			
			&.end {
				background-color: #ff4d4f;
			}
		}
		
		.point-info {
			flex: 1;
			
			.address {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 6rpx;
				display: block;
			}
			
			.time {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
	
	.passenger-info {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-top: 1rpx solid #eee;
		
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		
		.info {
			flex: 1;
			
			.name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 6rpx;
				display: block;
			}
			
			.phone {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.action-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			
			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 6rpx;
			}
			
			text {
				font-size: 24rpx;
				color: #1B6EF3;
			}
		}
	}
}

.order-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20rpx;
	border-top: 1rpx solid #eee;
	
	.order-info {
		.order-no {
			font-size: 24rpx;
			color: #999;
			margin-right: 20rpx;
		}
		
		.order-time {
			font-size: 24rpx;
			color: #999;
		}
	}
	
	.order-amount {
		.amount {
			font-size: 32rpx;
			color: #ff4d4f;
			font-weight: bold;
			margin-right: 20rpx;
		}
		
		.distance {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.order-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #eee;
	
	.action-btn {
		width: 160rpx;
		height: 64rpx;
		line-height: 64rpx;
		text-align: center;
		border-radius: 32rpx;
		font-size: 28rpx;
		margin-left: 20rpx;
		
		&.reject {
			background-color: #f5f5f5;
			color: #666;
		}
		
		&.accept {
			background-color: #1B6EF3;
			color: #fff;
		}
	}
}

.loading, .no-more {
	text-align: center;
	padding: 20rpx 0;
	color: #999;
	font-size: 24rpx;
}

/* 底部导航栏样式 */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-item image {
	width: 48rpx;
	height: 48rpx;
	margin-bottom: 6rpx;
}

.nav-item text {
	font-size: 22rpx;
	color: #666;
}

.nav-item.active text {
	color: #1B6EF3;
}
</style>
